/** @author: duanhaijiao  @date 2022/7/8--19:00 **/

/* name: "suspension" */
<template>
    <div>
        <div :id="'thediv' + item.id" v-for="item in moveViewList" class="pointer" @click="linkTo(item)">
            <img class="img" :src="$store.state.baseUrl + item.icon_image" :alt="item.name">
            <span class="advname">
                {{item.name}}
            </span>
            <span class="closeIcon el-icon-close">

            </span>
        </div>
    </div>
</template>
<script>

    export default {
        props: {
            moveViewList: {
                type: Array,
                default: []
            }
        },
        data() {
            return {
                xPos: 300,
                yPos: 200,
                step: 1,
                delay: 8,
                height: 0,
                Hoffset: 0,
                Woffset: 0,
                yon: 0,
                xon: 0,
                pause: true,
            };
        },

        mounted() {
            // interval=setInterval(this.changePos,10)
            //move方法的具体实现
            function moveSome(id, data,initw = 100, inith = 100) {
                let interval;
                let xPos = Math.random() * 1100, yPos = Math.random() * 1100, yon = 0, xon = 0;
                let speed = 1;
                let secret = document.getElementById(id);
                secret.addEventListener('mouseover', function () {
                    secret.lastChild.style.display = 'block'
                    clearInterval(interval)
                    secret.lastChild.addEventListener('click',function (e) {
                        clearInterval(interval)
                        e.stopPropagation()
                        secret.remove()
                    })
                })
                secret.addEventListener('mouseleave', function () {
                    secret.lastChild.style.display = 'none'
                    interval = setInterval(move, 10);
                })
                interval = setInterval(move, 10);

                function move() {
                    var windowWidth = document.documentElement.clientWidth;
                    var windowHeight = document.documentElement.clientHeight;
                    let Hoffset = secret.offsetHeight;
                    let Woffset = secret.offsetWidth;
                    // console.log(secret.style.left + "x" + secret.style.top);
                    secret.style.left = (xPos + document.body.scrollLeft + document.documentElement.scrollLeft) + "px"
                    secret.style.top = (yPos + document.body.scrollTop + document.documentElement.scrollTop) + "px"
                    if (yon) {
                        yPos = yPos + speed;
                    } else {
                        yPos = yPos - speed;
                    }
                    if (yPos < 0) {
                        yon = 1;
                        yPos = 0;
                    }
                    if (yPos >= (windowHeight - Hoffset)) {
                        yon = 0;
                        yPos = (windowHeight - Hoffset);
                    }
                    if (xon) {
                        xPos = xPos + speed;
                    } else {
                        xPos = xPos - speed;
                    }
                    if (xPos < 0) {
                        xon = 1;
                        xPos = 0;
                    }
                    if (xPos >= (windowWidth - Woffset)) {
                        xon = 0;
                        xPos = (windowWidth - Woffset);
                    }


                    //此时向右
                    // if (x_dir == 1) {
                    //     //即将撞墙
                    //     if (Number(secret.style.left.replace("px", "")) + speed > windowWidth - initw) {
                    //         secret.style.left = windowWidth + (first ? Math.random() * 1000 : 0) - 100 + "px";
                    //         x_dir = 0;
                    //     }
                    //     //没撞墙
                    //     else {
                    //         secret.style.left = Number(secret.style.left.replace("px", "")) + (first ? Math.random() * 1000 : 0) + speed + "px";
                    //     }
                    // }
                    // //此时向左
                    // else {
                    //     //即将撞墙
                    //     if (Number(secret.style.left.replace("px", "")) - speed < 0) {
                    //         secret.style.left = "0px";
                    //         x_dir = 1;
                    //     }
                    //     //没撞墙
                    //     else {
                    //         secret.style.left = Number(secret.style.left.replace("px", "")) + (first ? Math.random() * 1000 : 0) - speed + "px";
                    //     }
                    // }
                    //
                    // //此时向下
                    // if (y_dir == 1) {
                    //     //即将撞墙
                    //     if (Number(secret.style.top.replace("px", "")) + speed > windowHeight - inith) {
                    //         secret.style.top = windowHeight + (first ? Math.random() * 1000 : 0) - 100 + "px";
                    //         y_dir = 0;
                    //     }
                    //     //没撞墙
                    //     else {
                    //         secret.style.top = Number(secret.style.top.replace("px", "")) + (first ? Math.random() * 1000 : 0) + speed + "px";
                    //     }
                    // }
                    // //此时向上
                    // else {
                    //     //即将撞墙
                    //     if (Number(secret.style.top.replace("px", "")) - speed < 0) {
                    //         secret.style.top = "0px";
                    //         y_dir = 1;
                    //     }
                    //     //没撞墙
                    //     else {
                    //         secret.style.top = Number(secret.style.top.replace("px", "")) + (first ? Math.random() * 1000 : 0) - speed + "px";
                    //     }
                    // }

                }
            }

            this.moveViewList.map((m) => {
                console.log(m)
                moveSome('thediv' + m.id,m)
            })

        },
        methods: {
            linkTo(data) {
                if(data.is_jump == 0){
                    window.location.href = data.url;
                }else{
                    this.$router.push({path:'/singlePage',query:{type:1,id:data.id}})
                }
            },
            changePos() {
                let width = document.documentElement.clientWidth;
                let height = document.documentElement.clientHeight;
                this.Hoffset = this.$refs.thediv.offsetHeight;
                this.Woffset = this.$refs.thediv.offsetWidth;
                this.$refs.thediv.style.left = (this.xPos + document.body.scrollLeft + document.documentElement.scrollLeft) + "px";
                this.$refs.thediv.style.top = (this.yPos + document.body.scrollTop + document.documentElement.scrollTop) + "px";
                if (this.yon) {
                    this.yPos = this.yPos + this.step;
                } else {
                    this.yPos = this.yPos - this.step;
                }
                if (this.yPos < 0) {
                    this.yon = 1;
                    this.yPos = 0;
                }
                if (this.yPos >= (height - this.Hoffset)) {
                    this.yon = 0;
                    this.yPos = (height - this.Hoffset);
                }
                if (this.xon) {
                    this.xPos = this.xPos + this.step;
                } else {
                    this.xPos = this.xPos - this.step;
                }
                if (this.xPos < 0) {
                    this.xon = 1;
                    this.xPos = 0;
                }
                if (this.xPos >= (width - this.Woffset)) {
                    this.xon = 0;
                    this.xPos = (width - this.Woffset);
                }
            },
            clearFdAd() {
                clearInterval(interval)
            },
            starFdAd() {
                interval = setInterval(this.changePos, 10)
            },
        }
    };
</script>

<style lang="scss">
    [id^='thediv'] {
        z-index: 100;
        position: absolute;
        top: 43px;
        left: 2px;
        width: 100px;
        .advname{
            position: absolute;
            display: block;
            bottom: 16px;
            width: 100px;
            left: 0;
            text-align: center;
            font-weight: bold;
            color: #fff;
        }
        .closeIcon{
            position: absolute;
            width: 16px;
            height: 16px;
            font-size: 16px;
            top: 4px;
            right: 4px;
            color: #fff;
            display: none;
        }
    }

</style>
